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الفهرس 


O O O E E E 1۲؟‎ M15 ماهي ال‎ 
BO O كيف بدأت فكرة ۸11-5 1۲؟‎ 
BO 17١15 الميزات الجديدة في‎ 
Sa SSSR O OSO aA SEE ADS OR SOE دعم 1۲۷15 للمتصفحات‎ 
O 1۲١15 العناصر الجديدة في‎ 
OR O O OT ۸۲ ۸M15 عناصر العلامات مں )اج الجديدة في‎ 
Sa a Ra aR العناصر الجديدة لدعم الوسائط المتعددة‎ 
Osi Til Rao aba Ai a A ٤Ca"۷جك العنصر‎ 
O yT العناصر الجديدة في النماذج‎ 
Ole AS Ea e القيم الجديد للخاصية عمر† في العنصر اما‎ 
OS E OTO GG ۲۸15 العنصر علا في‎ 
O DR O ۸7۸١15 أنواع الفيديو المدعومة في‎ 
LI N O O كيف تستخدم العنصر 0ع ل۷‎ 
I E CT RO |٤ المتصفح‎ 
DD OE DO O O O خواص العنصر 0ع لآ۷‎ 
De yy H۲ ۸15 العنصر ماله في‎ 
ID O o O ١۲١15 الملفات الصوتية المدعومة في‎ 
LI SS O O ج‎ dio كيف يعمل العنصر‎ 
ll N 0 OSC |٤ المتصفح‎ 
LI ج‎ dio خصائص العنصر‎ 
A E O O ca"۷جو العنصر‎ 
DAE O H۲ ۸M15 ما هو العنصر كج۷" هع في‎ 
AE إنشاء العنصر كج۷"هع‎ 
A SR E O O JavaScript مlدختساب‎ can ۷as الرسم على عنصر‎ 
LS فهم الأبعاد في العنصر كج۷هء‎ 
E RE أمثلة عن الرسم على كج۷"جع‎ 
ISS hiatal رسم خط‎ 

رسم دائرة A Cy‏ 
رسم مستطيل متدرج اللون 1 

LI E E O O وضع صورة على وج۷" جع‎ 

تخزين البيانات عند المستخدم في O O 1۲١15‏ 


E N localStorage inl 
TS sessionStorage inl 


الأنواع الجديدة للعنصر اںمم| في 1۲۸15 


دعم المتصفحات للأنواع الجديدة في العنصر اںمہ] REE‏ 
نوع حقل الإدخال اأةصع eA AA‏ 
نوع حقل الإدخال اا Ree ER Re‏ 
نوع حقلJ‏ |الإدخJI AAS number‏ 


نوع حقل الإدخال عع sS ٣a‏ 


نوع حقل الإدخال - بيانات التاريخ وllزوقتٽ Date Pickers‏ 


نوع حقل الإدخال e sear‏ 


عناصر النماذج lنفجديدة Form Elements‏ 
دعم المتصفحات للعناصر الجديدة 


خصائص النماذج الجديدة في ۲١115‏ 


N OI autocomplete ةيصlخll‎ 


E OS RAA autofہcںs الخاصية‎ 


الخصائص التي يمكن تجاوزها عن العنصر ۴0۲۳ e‏ 


الخاصية طwidt‏ 


الخاصية معاء 


multiple الخاصية‎ 


e novalidate الخاصية‎ 


pattern الخاصية‎ 


A SARE placeholder انلخاصية‎ 


NOOSE RANE rع۹uأ الخاصية عا‎ 


الخصائص الجديدة للعناصر في HTMLS‏ 


ARA RA EEA datalist العنصر‎ 
TE )kمyٍعeع۸ العنصر‎ 
Se RTA output العنصر‎ 


ماهي أ HTML5؟‏ 


تعتبر 11%5 هي الجيل الجديد القياسي لکل من HTML, XH TM1‏ و 1۲ML DOM‏ , ویذکر ان 


الإصدار القديم من H1١1]‏ كان 1999 وقد تغير عالم الشبكة العنكبوتية ٤۴٣۲ع)11‏ كثياً منذ ذلك الوقت, ومازال 


5 ۳ قيد التطوير حت تاريخه مع العلم أن بعض الإصدارات الأحيرة من المتصفحات تدعم بعض ميزات M15‏ 1 ]]1. 


كيف بدأت فكرة M15‏ 1؟ 


إن HTML5‏ هو êرة‏ التعاون )World Wide Web Consortiun¬) W3C.01g jı‏ وبين الجموعة 


Web Hypertext Application Technology Working Group) WHATWG‏ )). وقرروا ان ھم 


قواعد 1111-5 هي: 


الميزات الجحديدة يجب أن يتم بناۇھا اعتماداً عل JavaScript , HTML, CSS, [OM‏ 
تقليل الحاحة إلى عناصر حارحية مشل الفلاش مثلا. 

ميزات أفضل في عملية معالحة الأحطاء. 

المزيد من العلامات 13۲K 1p‏ للاستعاضة عن كتابة شيفرة خ۲1٥3745[.‏ 

يجب أن تكون 1111-5 مستقلة عن نوع الأحهزة التي تعمل عليها. 

عملية تطوير 1۲115[ يجب أن تكون معلنة بحميع المهتمين بعالم الشبكة العنكبوتية ٤۲۸6ع)11.‏ 


الميزات الجديدة في 15ا1M‏ ]ا 


العنصر 3173S‏ لتنفيذ العمليات الرسومية. 

العنصرين 2110 ۷10٤0,‏ لتشغيل ملفات الصوت والصورة. 

دعم أفضل لتخزين الصفحات قي نمط عدم الاتصال 0۲4۴ء .o۴ in٤‏ 

عناصر حديدة لدعم أنواع معينة من امحتوى مثل article, footer, header, 14V, se°t101‏ وغيرھl.‏ 


„calendar, date, time, email, url, search Jia عناصر إدحال جديدة‎ 


دعم 1۲M15‏ للمتصفحات 


حت تاريخ كتابة هذه المقالة فإن الإصدارات الأخيرة من سفاري 54£31۲, کروم 0۸۲0128 , فایرفوکس ×٥؟ع‏ ۴1۲ , 


أوبرا 0813 تدعم بعض میزات 15 1N‏ 11, و 1۴9 سیدعم بعض ميزات £5[ .H' ١M‏ 


العناصر الجديدة في 15ا۲M]‏ 
لقد طراً الكثير من التغير على عام الشبكة العنكبوتية ۲1€ع)11 منذ 1999 عندما اعتمدت المواصفات القياسية ل 


4.1 ]Mآ1,‏ وحالياً بعض عناصر 11114 ل تعد تستخدم أو لا تستخدم بالطريقة التي كان من المفترض أن تستخدم 
بار لذلك HTML5‏ ولتحقيق حاحات الشبكة العنكبوتية 110۲١6٤‏ المتجددة تضم عناصر حديدة لبناء بنية أفضل, تدع 


الرسوميات والوسائط المتعددة إضافة إلى بناء أفضل للنماذج. 


عناصر العلامات رu‏ ااج" الجديدة في HTMLS‏ 
<article>‏ 


تستخدم هذه العلامة للبيانات الخارحية, كنصوص الأخبار , والمدونات والمنتديات أو محتوى من مصدر خارحي. 
<aside>‏ 


تستخدم هذه العلامة للمحتوى المرتبط بالحتوى الذي هو بجانب العلامة, حيث أن النص الذي تحيط به هذه العلامة مرتبط بالنص 


الجانى. 
<command>‏ 


هذه العلامة تستخدم من أجل الزر ١01))ا8‏ أو أزرار الاخحتيار الفردي 01))اطهاله۸ أو أزرار الاحتيار المتعدد 


.Checkbox 

<details> 

لشرح المزيد من التفاصيل حول المستند أو جزء من المستند. 

<summaryZz 

تستخدم هذه العلامة بداحل العلامة <[1ة٤عك>,‏ ويستخدم للنصوص المختصرة. 

<figure> 

تستخدم هذه العلامة لتحميع مقطع من حتوى مستقل, مثل ملف مرئي أو نص مستقل ضمن الصفحة. 


<figcaption> 


تُستخدم هذه العلامة لوضع عنوان فرعي ضمن العلامة <۲۴ا1g>.‏ 

<footer> 

تستخدم هذه العلامة لتذييل خاية الصفحة أو فاية قسم ضمن الصفحة, حيث يمكن أن تضم اسم الكاتب مثلاً, تاريخ الصفحة, 
ومعلومات الاتصال, أو حت معلومات حقوق النشر. 

<header> 

تستخدم هذه العلامة لكتابة ترويسة الصفحة أو ترويسة قسم ق الصفحة, كما يمكن أن تضم معلومات وروابط لتصفح الموقع. 
<hgroup>‏ 

تستخدم هذه العلامة لتجميع العلامات 16 - 11 مع بعضها في حال ورود أكثر من واحدة بشكل متتابع في الصفحة. 
<mark>‏ 

تستخدم هذه العلامة للإحاطة بالنص الذي يجب إبرازه ضمن الصفحة مثل وضع خلفية صفراء للنص. 

<meterZz 

تستخدم هذه العلامة للقياسات ويعكن استخدامها فقط في حال معرفة الحد الأدن والحد الأقصى للقيمة. 

<navz 

تُستخدم هذه العلامة للإحاطة بروابط التنقل ضمن الصفحة أو ضمن الموقع. 

<progressZ 

تُستخدم هذه العلامة لعرض نسبة تقدم العمل الذي يتم تنفيذه. 

<ruby> 

تستخدم هذه العلامة قي حال كتابة ملاحظات أو أحرف باللغة الصينية. 


<rt> 


تحدم هذه العلامة لشرح حواشي اللغة الصينية. 

<rpþZ 

ستخحدم هذه العلامة لتحديد المعلومات التي سيظهرها المتصفح الذي لا يدعم العلامة <رطنا>. 
<section>‏ 


تستخدم هذه العلامة للإحاطة بقسم في الصفحة, مثل الفصول أو الترويسات 1۴44٥۲5‏ أو التذبیلات ,00٤8۲۶‏ أو قسم آخر 
قي الصفحة. 


<time> 

تستخدم هذه العلامة للتعريف بنص على أنه وقت أو تاریخ أو حقی كلاها. 

<wbr> 

تُستخدم هذه العلامة لتحديد المكان الذي بمکن عندها البدء بسطر حديد ق حال الضرورة. 


العناصر الجديدة لدعم الوسائط المتعددة 


<audio> 

تُستخدم هذه العلامة للتعريف محتوى الوسائط المتعددة المسموعة, مثل الملف الصوت, أو موسيقى أو أي توى صونٍ. 
<video>‏ 

تستخدم هذه العلامة للتعريف ممحتوى الوسائط المتعددة المرئية, مثل مقطع فلم, أو أي محتوى مرئي آخر. 
<sSOUrCEZ‏ 

تستخدم هذه العلامة للتعريف بمحتوى وسائط متعددة سواء كانت مسموعة أو مرئية. 

<embed> 


تستخدم هذه العلامة للتعريف بالحتوى المضمن مثل حتوى فلاش. 


Canvas العنصر‎ 


<canvasz 
.[3745٥۲1pا تُستخدم هذه العلامة لإتاحة إمكانية الرسم باستخدام‎ 


العناصر الجديدة في النماذج 
<datalist>‏ 


تستخدم هذه العلامة لتعريف جحموعة من القيم المسموح إدحاها ق حقل نصي. 

<keygen> 

تستخدم هذه العلامة لتوليد مفاتيح تستخدم لمصادقة المستخدمين. 

<outputz 

تُستخحدم هذه العلامة لوضع محتوى ما فيها, مثل الحتوى الذي ينتج عن استخدام [4۷45٥٣1٤‏ 


القيم الجديد للخاصية عممرع في العنصر مہ1 
tel‏ 


عند تحديد قيمة الخاصية 7€ للعنصر 0ا11 إلى القيمة 61 فهذا يعني أن القيمة التي سيتم إدخالهما هي رقم هاتف. 


search 


عند تحديد قيمة الخاصية ٥٤7ا‏ للعنصر 1ا11 إلى القيمة 563۲١١‏ فهذا يعني أن الحقل النصي يستخدم للبحث. 


url 


عند تحديد قيمة الخاصية ٥‏ للعنصر 1ا11 إلى القيمة 11٣1‏ فهذا يعني أن القيمة التي سيتم إدخالها هي عنوان صفحة على 
الإنترنت. 
email‏ 
عند تحديد قيمة الخاصية ٥‏ للعنصر ا1010 إلى القيمة 12311 فهذا يعني أن القيمة التي سيتم إدخاطها عنوان بريد إلكترو 


datetime 


عند تحديد قيمة الخاصية 78 للعنصر 1ا11 إلى القيمة 401108 فهذا يعني أن القيمة التي سيتم إدحالهما هي تاريح أو وقت 
أو تاریخ ووقت . 

date 

عند تحديد قيمة الخاصية ٥‏ للعنصر 0ا12 إلى القيمة 438 فهذا يعني أن القيمة التي سيتم إدحاطها هي تاريخ. 

month 

عند تحديد قيمة الخاصية ¥8 للعنصر 1110 إلى القيمة 12016 فهذا يعني أن القيمة التي سيتم إدخاهها تعبر عن شهر. 


week 


عند تحديد قيمة الخاصية K٥‏ للعنصر 0ا11 إلى القيمة ٥٥K‏ فهذا يعني أن القيمة التي سيتم إدخالها هي رقم أحد أسابيع 


السنة. 

time 

عند تحديد قيمة الخاصية € للعنصر خ11 110 إلى القيمة 1102€) فهذا ي يعني أن القيمة التي سيتم إدخاها هي وقت صحيح. 
datetime-local‏ 


عند تحديد قيمة الخاصية 8 للعنصر 1011 إلى القيمة 461١٥-10٥21‏ فهذا يعني أن القيمة التي سيتم إدخاها هي تاريخ 
يتوافق مع التاريخ امحلي. 

number 

عند تحديد قيمة الخاصية K٥‏ للعنصر 1010 إلى القيمة 1111006۲ فهذا يعني أن القيمة التي سيتم إدخاها هي رقم. 

range 

عند تحديد قيمة الخاصية 7€ للعنصر 1111٤‏ إلى القيمة ۲18€ فهذا ي يعني ان القيمة التي سيتم إدحاها هي رقم بين قيمة دنيا 


وقيمة عليا. 
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color 


عند تحديد قيمة الخاصية K٥‏ للعنصر 1ا11 إلى القيمة ٥010١‏ فهذا يعني أن القيمة التي سيتم إدخاها هي قيمة ستى عشرية 
تعبر عن رقم مثل #۴۴0000 


العنصر video‏ في HTML5‏ 
قبل 111-5 لا يوجد طريقة قياسية لعرض الملفات للرئية (الفيديو) على الإنترنت فالبعض مثلاً يستخدم الفلاش لعرضها, لكن 
HMMS‏ حxدد‏ طريقة قياسية لعرض هذه الملفات وذلك باستخدام العنصر .v1deo‏ 


آنواع الفيديو المدعومة في M15‏ 1۲ 
حالياً تم دعم نوعين من الملفات المرئية من حلال 1111-5 وهي: 


. ها1٤ ملفات 0€ بتشفیر 11۴۵0۲3 وتشفیر‎ : 0g 


.AAC yii, H.264 yazı MPEG4 dll. :MPEG4 e 


كيف تستخدم العنصر 0ع لآ۷ 
لعرض ملف مرئي (فيديو) باستخدام HH] MJ5‏ کن استخدام الشيفرة التالية: 


<video src="movie.ogg" controls="controls"> </video> 
تستخدم لعرض عناصر التحكم بالفيديو مثل زر التشغيل 4¥[ط, وزر الإيقاف ٥41م وغيرها, كما يُفضل‎ ٥01٤۲018 الخاصية‎ 


استخدام الخاصيتين العرض طلس والارتفاع ٤اع1عط.‏ أما امحتوى الموحود بين بداية العنصر <1> وغايته 


<0عل۷1/> فيظهر فقط في حال أن المتصفح لا يدعم العنصر 0ع ۷14: 
<video src="movie.ogg" width="320" height="240" controls="controls">‏ 
المتصفح المستخدم لا يدعم العنصر ۷1٤0‏ 
</video>‏ 


لمثال السابق يستخدم ملف بتنسیق 08£ حیث يعمل فقط على فایرفوکس ,۴1]€f0×‏ أوبرا €13 0p‏ و Chrome ej‏ , 
ولكي يعمل على سفاري 5463٣1‏ أيضاً عندها يجب استخدام التنسيق 864 1۲. كما يدعم العنصر ۷14860 أكثر من عنصر 


S0٥‏ بحيث يمکن سرد اكثر من ملف وسيختار المتصفح أول تنسيق يمكنه تشغيله كما قي المغال التالي: 


11 


<video width="320" height="240" controls="controls"> 
<source src="movie.ogg" type="video/ogg" /> 


<source src="movie.mp4" type="video/mp4" />‏ 
المتصفح المستخدم لا يدعم العنصر ۷10 
</video>‏ 


المتصفح 1٤‏ 
لا يدعم المتصفح 188 العنصر ۷1180 بينما المتصفح 189 سيدعم العنصر ۷140 باستخدام التنسيق P٤64‏ <5. 


خواص العنصر 0ع !۷ 
yهامut0ه:‏ وعكن تحديد القيمة 1101¥ عندها سيم تشغيل الملف مباشرة عندما يصبح حاهزاً. 
كأ0اtاcon:‏ وعكن تحديد القيمة 0١٤۲015‏ عندها سيتم إظهار عناصر التحكم (تشغيل - إيقاف ...). 
٠‏ اطعاعط: يحدد ارتفاع الفيديو بالبيكسل عند تشغيله على المتصفح. 
ه ط0ه[: وعكن تحديد القيمة 100 عندها سيْعاد تشغيل الملف بعد انتهائه لعدد مرات غير حددة. 
ه 144عاط: وعكن تحديد القيمة ۲۴1034 أي سيتم تحميل املف عند تحميل الصفحة, ويتم تجاهل هذه الخاصية في 
حال تم تحديد القيمة 13¥ 0ا1ه. 
:S۲٥١ ۵‏ يحدد عنوان ملف الفيديو على الإنترنت. 


طdtاس:‏ يحدد عرض الفيديو بالبيكسل عند تشغيله على المتصفح. 


العنصر audio‏ في HTML5‏ 
قبل 1111-5 لا يوجحد طريقة قياسية لتشغيل الملفات الصوتية على الإنترنت فالبعض مثلاً يستخدم الفلاش لعرضها, لكن 
۳۳55 حدد طريقة قياسية لعرض هذه الملفات وذلك باستخدام العنصر 4110. 
الملفات الصوتية المدعومة في ]1M15‏ 
حت الآن يدعم 11%5 ثلاثة أنواع من الملفات الصوتية وهي: 
.Ogg Vorbis e‏ 
.MP3 6‏ 
.Wav ®‏ 
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كيف يعمل العنصر u di0‏ ج 
لتشغيل ملف صوت باستخدام 1111-5 يجب استخدام الشيفرة التالية: 


<audio src="song.ogg" controls="controls"></audio> 
الخاصية ١0۸1۲01ء تستخدم لعرض عناصر التحكم بالملف الصوتٍ مثل زر التشغيل ۷ةآط, وزر الإيقاف ٥415م والتحكم‎ 


عستوى الصوت. أما المحتوى الموحود بين بداية العنصر <10ل 41> وغايته <1d10ا4/>‏ فيظهر فقط في حال أن المتصفح لا 
يدعم العنصر :21d10‏ 


<audio src="song.ogg" controls="controls"> نص‎ pe ¥ المتصفح المستخدم‎ u d10 > / audi 0< 


المغال السابق يستخدم ملف بتنسيق 08g‏ حيث يعمل فقط على فایرفوکس ×۴1€0, أوبرا €13 0p‏ و Chrome ej‏ , 
ولکي يعمل على سفاري 5483۲1 أيضاً عندها يجب استخدام التنسيق 3۷ P3,‏ 1. کما یدعم العنصر 10لا أكثر من 


عنصر SO 1٤۲٤٥٤‏ بحيث يمكن سرد اکثر من ملف وسیختار المتصفح اول تسق کته تشغیله کما ي اتال التالي: 
<audio controls="controls">‏ 
<source src="song.ogg" type="audio/ogg" />‏ 


<source src="song.mp3" type="audio/mpeg" /> 


0 المتصفح المستخدم لا يدعم العنصر 
</audio>‏ 


المتصفح 1٤‏ 
لا يدعم المتصفح 188 العنصر 1110 بينما المتصفح 1۴9 سيدعم العنصر 13110. 
خصائص العغنصر 0oإd au‏ 
yهاut0pه:‏ وعكن تحديد القيمة 1101¥ عندها سيم تشغيل الملف مباشرة عندما يصبح حاهزاً. 
كآ0اtاcon:‏ وعكن تحديد القيمة 0۸٤۲015‏ عندها سيتم إظهار عناصر التحكم (تشغيل - إيقاف ...). 
٠‏ ط0ه[: ومكن تحديد القيمة 100 عندها سيْعاد تشغيل الملف بعد انتهائه لعدد مرات غير حددة. 
ه 144عاط: ومكن تحديد القيمة ۲۴1034 أي سيتم تحميل املف عند تحميل الصفحة, ويتم تجاهل هذه الخاصية في 


حال تم تحديد القيمة 13¥ 0ا1اه. 
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:۲١ 6‏ يحدد عنوان الملف الصوت على الإنترنت. 


العنصر كئج۷موc‏ 
يُستخدم العنصر 317۷38 للرسم على الصفحة باستخدام ا۲1٥3۷45[.‏ 


ما هو العنصر canvas‏ في HTML5‏ 
العنصر 317358 في 1115[ يستخدم ال 4745۲1[ للرسم على الصفحة, وال ٥317۷38‏ هي منطقة مستطيلة 


الشكل ويمكن التحكم بكل بيكسل من هذه المنطقة المستطيلة. ويمكن الرسم على العنصر ٥317۷38‏ باستخدام العديد من المناهج 
sئMethod‏ ن ال Script‏ vaه[‏ لرسم المسارات والأشكال الصندوقية والدوائر وحقى إمكانية إضافة الصور. 


إنشاء العنصر ئجر7١رجc‏ 
لإنشاء عنصر 311۷38 قي الصفحة, يجب إدراج عنصر ٥31738‏ مع تحديد الخاصية 14 وتحديد عرض ط1 وارتفاع 


height‏ العنصر. 
<canvas id="canvas Test" width="200" height="100"></canvas>‏ 


الرسم على عنiصر JavaScript مlدختwlڊ canvas‏ 
العنصر ٥31735‏ لا يحتوي على مناهج كئل0طاء1× خاصة به وإنغا حب استخدام ال [3745٥۲1٤‏ للرسم كما ق 


المغال التالي: 
<script type="text/Javascript" >‏ 
var c=document.getElementById('canvas Test");‏ 
var cxt=c.getContext(2d");‏ 
cxt.filIStyle="#FFOO0O";‏ 


cxt.flIRect(0,0,150,75); 
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</script> 


يتم استخدام قيمة الخاصية 14 للعنصر 021۷38 في اذ [3745٥۲1‏ للرسم عليها: 
var c=document.getElementById('canvas Test");‏ 
ومن تم يتم إنشاء سياق للرسم ثنائي البعد على العنصر :C417۷38‏ 
var cxt=c.getContext(2d");‏ 


الكائن )”24 )×ع ٤0۸)‏ 1ءg‏ كائن حديد في 115 111, مع احتوائه على العديد من المناهج كله 1ء1 لرسم المسارات 
ئ والصناديق 0×85 85, والدوائر 1۲٥165‏ , وحتى إضافة الصور, والشيفرة التالية يرسم مستطيل أحر: 


cxt.filIStyle="#FFOO0O0"; 


cxt.fllRect(0,0,150,75); 
مع‎ ٥3۸7۷241 ٥؟ا حيث أن الخاصية ٥1را11[5٤ عل لون المستطيل أحر, والمنهج ا٤ 111۸ يرسم مستطيلاً ضمن العنصر‎ 
ليد موقعه ضمن العنصر وعرضه وارتفاعه.‎ 


فهم الأبعاد في العنصر ئو۷"جء 
منهج ۴111۸-٤٤‏ المستخدم قي المثال السابق يستخدم قيم الوسائط التالية (0,0,150,75), وهذا يعني رسم مستطيل 


عرضه 150 وارتفاعه 75, بداية من الزاوية العليا اليسرى للعنصر 1e5‏ كئ2ة7٥c4‏ (0,0), حيث يتم استخدام الإحداثيات ,× 
للعنصر 031735 للرسم. 


أمثلة عن الرسم على ئجرمهع 


رسم حط وذلك بتحديد نقطة بداية وتاية الخط. 


<!DOCTYPE HTML> 
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style=-"border:1px 


<html> 


<body> 


<canvas id=-"myCanvas" width="200" height="100" 


#c3c3c3;"> 

Your browser does not support the canvas element. 
</canvas> 

<script type="text/javascript" > 

var c=document.getElementById(myCanvas"); 
var cxt=c.getContext(2d"); 
cxt.movel!'o(10,10); 

cxt.line To 150,50); 

cxt.line T'o10,50); 

cxt.strokeg; 

</script> 

</body> 


</html> 
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رسم دائرة 
یتم رسم الدائرة بتحديد حجمها ولوا وموقعها ضمن العنصر Canvas‏ 


<!DOCTYPE HIML> 
<html> 
<body> 


<canvas id="myCanvas" width="200" height="100" style="border:1px solid 
#c3c3c3;"> 


Your browser does not support the canvas element. 
</canvas> 

<script type="text/javascript" > 

var c=document.getElementById('myCanvas"); 
var cxt=c.getContext(2d"); 
cxt.filIStyle="#FFOO0O"; 

cxt.beginPathg; 
cxt.arc(/0,18,15,0,Math.PI*2,true); 
cxt.closePatho; 

cxt. filo; 

</script> 

</body> 

</html> 
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رسم مستطيل متدرج اللون 
رسم مستطیل متدرج اللون بتحديد الألوان التي ستستخدم وأبعاد هذا المستطيل 


<!DOCTYPE HTITML> 
<html> 
<body> 


<canvas id=-"myCanvas" width="200" height="100" style="border:1px solid 
#c3c3c3;"> 


Your browser does not support the canvas element. 
</canvas> 

<script type="text/javascript" > 

var c=document.getElementById(myCanvas"); 

var cxt=c.getContext(2d"); 

var grd=cxt.createLinearGradient(0,0,175,50); 
grd.addColorStop(0,"F#FFOOOO"; 
grd.addColorStop(1,"F#OOFFOO"; 

cxt.fillStyle=grd; 


cxt.flIRect(0,0,175,50); 
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</script> 
</body> 


</html> 


وضع صورة على ئجورا١رجc‏ 
وضع صورة فوق العنصر ٥4117۷358‏ 


<!DOCTYPE HTML> 
<html> 
<body> 


<canvas id-"myCanvas" width="200" height="100" style="border:1px solid 
#c3c3c3;"> 


Your browser does not support the canvas element. 
</canvas> 

<script type="text/javascript" > 

var c=document.getElementById(myCanvas"); 

var cxt=c.getContext( 2d"); 

var img=new Image() 


img.src="img_flwr.png" 
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cxt.drawImagedimg, 0,0); 
</script> 
</body> 


</html> 


ك 
ESS‏ 


تخزين البيانات عند المستخدم في H1۲M15‏ 
تقدم HIMLS‏ منهجين Methods‏ جحدیدین لتخحزين البيائات عند الزبون: 


c5t0rgeه!:‏ لتخزين البيانات بدون أي قيود خحاصة بالوقت. 


r‏ 0n5t0اعك:‏ تخزين البيانات لجحلسة واحدة فقط. 


حالياً یتم استخدام ال sهآ0kهع‏ لتخزين البيانات عند الزبون, ولكن ال كمإgهمع‏ ليست مناسبة لتخزين البيانات ذات الحجم 
لكبير لأن هذه البيانات يتم تمريرها عند تنفيذ كل طلب إلى المخدم, نما يجعل الطلب بطيئ وغير فعال. بينما في 1۲%5 فإن 
لبیانات ل يتم إرساها اى الخادم عند كل طلب وإغا يتم إرسال هذه البيائات فقط عند الطلب , ا سمح بتخزين كمية كبيرة من 
يانات بدون التأثير على آداء الموقع. وهذه البياتات يتم تخزینها ق منطقة خختلفة حسب کل موقع وکل موقع يستطيع الوصول إلى 


لبيانات الخاصة به فقط. ويتم استخدام ال ا۲1٥375[‏ لتخزين واستعادة البيانات. 


lئ4iaچ localStorage‏ 
المنهج ع 10٥4150۲38‏ يخزن البيانات بدون أي قيود خحاصة بالوقت, حيث أن هذه البيانات ستكون متوفرة لاحقاً, قي 


اليوم التالي, أو أسبوع أو حق سنة. وفيما یلی مغال عن كيفية إنشاء واسترحاع البيانات: 
<script type="text/javascript" >‏ 
localStorage.lastname="Smith";‏ 


document.write docalStorage.lastname); 
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</script> 
وفيما يلى مثال عن كيفية تخزين عدد مرات زيارة المستخدم للصفحة:‎ 
<script type="text/Javascript" > 


if JocalStorage.pagecount) 


localStorage.pagecount=NumberdocalStorage.pagecount) +1; 


else 


localStorage.pagecount=1; 


document.write Visits "+ localStorage.pagecount + " time(s)."); 
</script> 


lئqiaچ sessionStorage‏ 
منهج ٥510۸510۲48ءعء‏ يحزن البيانات لحلسة واحدة فقط ويتم حذف هذه البيانات بمجرد أن يغلق المستخدم 


المتصفح, وفيما يلي كيفية إنشاء واسترحاع الانات: 
<script type="text/javascript" >‏ 
sessionStorage.lastname="Smith";‏ 
document. write(sessionStorage.lastname);‏ 
</script>‏ 
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وفيما يلى مثال عن كيفية تخزين عدد مرات زيارة المستخدم لاصفحة قي الجلسة الحالية: 
<script type="text/Javascript" >‏ 


if sessionStorage.pagecount) 


sessionStorage.pagecount=NumbergsessionStorage.pagecount)y +1; 


else 


sessionStorage.pagecount=1; 


document.write Visits "+sessionStorage.pagecount+" time(s) this session."); 


</script> 


الأنواع الجديدة للعنصر input‏ في HTML5‏ 
۴35 تتوي على أنواع حديدة للعنصر 1001 في نماذج الإدحال, هذه الميزات الجديدة تقدم تحكم أفضل 


بعمليات إدخال البيانات والتحقق من صحتها. وفيما يلي سيتم شرح الأنواع التالية: 


.email ® 

.url ® 

.number 6e 

.range ® 

.Date pickers (date, month, week, time, datetime, datetime-local) 6 


„search ® 


22 


.color ® 


دعم المتصفحات للأنواع الجديدة في العنصر اuم‏ ہ1 


Safari Chrome Opera Firefox IE النوع‎ 
لا لا 9.0 لا لا‎ email 

url‏ لا لا 9.0 لا ل 
number‏ لا لا 9.0 لا لا 
range‏ لا لا 9.0 4.0 4.0 
yı | Date pickers‏ لا 9.0 لا لا 

search‏ لا لا ل ل لا 
color‏ لا لا لا لا لا 


ملاحظة: المتصفح أوبرا 013 يقدم الدعم الأفضل للأنواع الحديدة, وعلى كل يمكن البدء باستخدام هذه الأنواع حت لو أا غير 
مدعومة من قبل المتصفح حيث أا ستظهر كحقل نصي عادي. 


نوع حقل الإدخال [زجةصع 
النوع 1 يُستخدم في حقل الإدحال ق حال أن القيمة التي سيتم إدخاها هي عنوان بريد إلکترون , ویتم التأكد من 


صحة صيغة البريد الإلكترون اليدحل بمجرد إرسال قيم النموذج: 

E-mail: <input type="email" name="user_email" />‏ 
ملاحظة: المتصفح سفاري 5363۲1 على جهاز 1۲1018 تدعم النوع 101 حيث يتم تغيير لوحة المفاتيح على الشاشة بحيث 
تظهر القيمة (®) ويظهر الخيار .).٥012‏ 


نوع حقل الإدخال [ہں 
النوع url‏ يُستخحدم في حقل الإدحال تي حال أن القيمة التي سيتم إدخالها هي عنوان على الإنترنت, ويتم التأكد من 


صحة صيغة العنوان اليدحل بمجرد إرسال قيم النموذج: 


Homepage: <input type="url" name="user_url" /> 


ملاحظة: المتصفح سفاري 53۴3١1‏ على حهاز 1۲101۸8 تدعم النوع 11٣1‏ حيث يتم تغيير لوحة المفاتيح على الشاشة بحيث تظهر 
القيمة .).٥01((‏ 
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نوع حقل الإدخJl number‏ 
النوع ۴۲ يُستخدم في حقل الإدحال في حال أن القيمة التي سيتم إدحاها هي قيمة رقمية, كما بمكن وضع قيود 


oints: <input type="number" name="points" min="1" max="10" />‏ 
وعكن استخدام الخصائص التالية لفرض القيود على القيم الرقمية المقبولة: 


® <>113: قيمة رقمية تحدد القيمة الرقمية العظمى المسموح بإدخاهما. 

:mMin ®‏ قيمة رقمية تحدد القيمة الرقمية الدنيا المسموح بإدخاها. 

ع tك:‏ قيمة رقمية تحدد الخطوة بين الأرقام المسموح بإدحاطها (مثلاً إن كان الخطوة = 3 فإن القيم المسموح بها هي 3-, 
0, 3, 6 ...). 


ع7[1: قيمة رقمية تحدد القيمة الافتراضية لحقل الإدخحال. 
<!DOCTYPE HIML>‏ 
<html>‏ 
<body>‏ 
<form action="demo_form.asp" method="get">‏ 
Points: <input type="number" name-="points" min="1" max="10" />‏ 
<input type="submit" />‏ 
</form>‏ 
</body>‏ 


</html> 


6 | | Submit | 
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ملاحظة: المتصفح سفاري 53۴3۲1 على حهاز 1۲1018 تدعم النوع 11126 حيث يتم تغيير لوحة المفاتيح على الشاشة 
بحيث تظهر القيم الرقمية. 


نوع حقل الإدخال معرaا‏ 
النوع 6 يستخدم في حقل الإدحال ق حال أن القيمة التي سيتم إدحاها هي قيمة رقمية تقع ضمن محال معين من 


الأرقام, يمكن الاحتيار من محال معين باستخدام شريط متدرج يكن تحريكه ق الاتجاهين, كما يمكن وضع قيود على الأرقام المقبولة: 


<input type="range" name="points" min="1" max="10" /> 


i 0 Submit 


وعكن استخدام الخصائص التالية لفرض القيود على القيم الرقمية المقبولة: 


<>113: قيمة رقمية تحدد القيمة الرقمية العظمى المسموح بإدخاها. 

:mMin ®‏ قيمة رقمية تحدد القيمة الرقمية الدنيا المسموح بإدخاها. 

ع tك:‏ قيمة رقمية تحدد الخطوة بين الأرقام المسموح بإدحاطها (مثلاً إن كان الخطوة = 3 فإن القيم المسموح بها هي 3-, 
0, 3, 6 ...). 


ع7[1: قيمة رقمية تحدد القيمة الافتراضية لحقل الإدخحال. 


نوع حقل الإدخال - بيانات التاريخ وlلgقت Date Pickers‏ 
في ۲۲115 توحد عدة أنواع لدعم بيانات التاريخ والوقت وهي: 


4ل: تسمح باختيار التاريخ (اليوم - الشهر - السنة): 


Date: <input type="date" name="user_date" /> 


Date: 2010-01-15| ± | | Submit 


:onth‏ يسمح هذا النوع باختيار الشهر والسنة: 


<input type="month" name="user_date" /> 
Month: | 2010-02 ج‎ 
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۵ 11): يسمح هذا النوع باختيار الوقت (دقائق - ساعات): 


Time: <input type="time" name="user_date" /> 


Time: [200% # 


:datetime ®‏ يسمح هذا النوع باحتيار الوقت بالصيغة الدولية إضافة إلى إمكانية احتيار التاريخ: 


<input type="datetime" name="user_date" /> 
Date and time: 2010-09-01701:394£ Submit 


:datetinne-10ca[ e‏ يسمح هذا النوع باختيار الوقت إضافة إلى إمكانية احتيار التاريخ حسب التوقيت الحلي: 


<input type="datetime-local" name="user_date" /> 


ج 2009-01-01700:04 Date and time:‏ 
نوع حقل الإدخال search‏ 
يُستخدم هذا النوع كحقل للبحث كما ق حقل نصي للبحث قي الموقع أو البحث من خلال حوحل, ويعمل هذا الحقل 
النصى تماما كحقل نصى عادي. 


عناصر النماذج ائجديدة Form Elements‏ 
تضم ۲11115 جموعة من العناصر الجديدة التي تستخدم ق بناء النماذج وهي: 


.datalist ® 
.keygen e 


.OUtpuUlL ® 


دعم المتصفحات للعناصر الجديدة 


العنصر Safari Chrome Opera Firefox IE‏ 
datalist‏ لا لا 9.5 لا لا 
keygen‏ ل ل 10.5 3.0 ل 
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output‏ لا لا 9.5 لا لا 


datalist العنصر‎ 

يحدد العنصر 3115 جموعة من القيم كخيارات لحقل نصي, هذه القائمة يتم إنشاؤها من خلال العنصر 0101٩‏ 
داحل العنصر اك14)311, ولربط حقل الإدحال بالعنصر ااهل يجب تحديد قيمة الخاصية ا115 في الحقل النصى إلى قيمة 
الخاصية 14 في العنصر ata‏ : 


<input type="url" list="url_list" name-="link" /> 

<datalist id="url_list"> 

<option label="SyrDev" value="http://www.SyrDev.net" /> 
<option label="Google" value="http://www.google.com" /> 
<option label="Microsoft" value="http://www.microsoft.com" /> 
</datalist> 


العنصر keygen‏ 
الهدف من العنصر 1عK۴2‏ هو تقد طريقة آمنة للمصادقة على المستخدمين, حيث يعمل العنصر K۴۷881‏ على 
توليد مفتاحين, الأول حاص ١1۷4م‏ والثاني عام انام وذلك عند إرسال معلومات النموذج, حيث يتم تخزين المفتاح الخاص 
عند الزبون والعام يتم إرساله إلى الخادم, وعكن استخدام المفتاح العام لتوليد شهادة للزبون لمصادقة المستخدم فيما بعد. حالياً الدعم 


الذي توفره المتصفحات غير كاف لاعتبار هذا العنصر طريقة قياسية لعملية المصادقة. 
<form action="demo_form.asp" method="get">‏ 
Username: <input type="text" name="usr_name" />‏ 
Encryption: <keygen name="security" />‏ 
<input type="submit" />‏ 
</form>‏ 
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Username: Encryption: 2048 (High Grade) اا‎ Submit 


العنصر output‏ 
يُستخدم العنصر 01110 لإظهار أنواع ختلفة من المحرحات مثل العمليات الحسابية والعمليات الناتجة عن تنفيذ شيفرة 


:JavaScript 


<output id="result" onforminput="resCalcg"> </output> 


خصائص النماذج الجديدة في 1M1-5‏ ]1 
ی ۳٢۳۲15‏ توحد حصائص حديدة للعنصر 0۲۲2 والعنصر 1110 كما يلي: 


‘form ® 


.autocomplete 


.novalidate 


.autocomplete 

.autofocus 

form 

.formoverrides) formaction 
.formoverrides) formenctype 
.formoverrides) formmethod 
.formoverrides) formnovalidate 
.formoverrides) formtarget 
.height 

. width 

list 

.min 


. Max 
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.step O 

.multiple o 
.pattern (regexp) O 
.placeholder o 


.required oO 


Safari Chrome Opera Firefox IE الخاصية‎ 
4.0 3.0 9.5 3.5 8.0 | autocomplete 
4.0 3.0 10.0 لا ل‎ autofocus 

form‏ ل لا 9.5 لا لا 
y | formoverrides‏ ل 10.5 ل ل 
height‏ 8.0 3.5 9.5 3.0 4.0 
width‏ 8.0 3.5 9.5 3.0 4.0 
list‏ لا لا 9.5 لا لا 
min‏ ل ل 945 3.0 لا 
max‏ ل لا 9.5 3.0 لا 
step‏ لا لا 9.5 3.0 لا 
multiple‏ لا 3.5 لا 3.0 4.0 
novalidate‏ لا لا لا لا لا 
pattern‏ لا لا 9.5 3.0 لا 
yY | placeholder‏ ل ل 3.0 3.0 
required‏ لا لا 9.5 3.0 لا 


الخاصيA autocomplete‏ 
الخاصية 1e†eمدuutoconه‏ تحدد هل النموذج ۴0۲۳۲١‏ أو حقل الإدحال خناط 1٣‏ يتمتع بخاصية الإكمال التلقائي 


eteاutocomp,‏ وتعمل الخاصية pete‏ utocomnه‏ على العنصر >۴0۲۱١<‏ والعنصر <1 11> من الأنواع: ,t×ع†‏ 
ur, tel, email, password, datepickers, range, color‏ ,earchعء.‏ حیث جرد أن یبدا المستخدم بکتابة 


النص فإن المتصفح يُظهر قيم بمكن أن يتم إدحاها قي الحقل النصي: 


<form action="demo_form.asp" method="get" autocomplete="on"> 
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First name: <input type="text" name="fname" /> <br /> 

Last name: <input type="text" name="Iname" /> <br /> 

E-mail: <input type="email" name="email" autocomplete="offF /> <br /> 
<input type="submit" /> 


</form> 


ملاحظة: بعض المتصفحات تتطلب تفعيل خاصية ال 4110٥01216۴‏ لكي تعمل هذه الخاصية بشكل صحيح. 


الخاصي autofocus‏ 
تحدد الخاصية 1100٥118‏ بأن مؤشر الكتابة يعين في الحقل بعجرد تحميل الصفحة, وتعمل الخاصية 4110018 مع 


جميع أنواع العنصر ځ0ا100: 
<input type="text" name="user_name" autofocus="autofocus" />‏ 


الخاصية ٣٣اه‏ 

الخاصية £0۲1۲١‏ تحدد النموذج الذي يتبع له عنصر الإدحال خلا 11, وعكن أن ينتمي عنصر الإدحال مع أكثر من نغوذج 
وذلك بسرد قيمة الخاصية 1 للنموذج مع فراغ بين كل قيمة ق حال أن عنصر الإدحال يمكن أن ينتمي إلى أكثر من نموذج, وتطبق 
الخاصية 0۲1۲١‏ على جيع أنواع العنصر < :>1٥٥‏ 


<form action="demo_form.asp" method="get" id="user_form"> 
First name:<input type="text" name="fname" /> 
<input type="submit" /> 


</form> 
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Last name: <input type="text" name="Iname" form="user_form" /> 


الخصائص التي يمكن تجاوزها عن العنصر ۴0٣٣۳‏ 
وهي بعض الخصائص التي يعكن من خلاهما تجاوز الخصائص الحددة في العنصر <0۲12> وهي كما يلي: 


:0rt101 ®‏ وتسمح بتجاوز الخاصية 0101٩‏ للعنصر .]0۲۳۱١‏ 

.]0۲٨3 للعنصر‎ 2٥¥ € وتسمح بتجاوز الخاصية‎ :formenctypطe‎ e 

.£0۲12 ع112 للعنصر‎ 0d وتسمح بتجاوز الخاصية‎ :formmethod e 

.0۲12 وتسمح بتجاوز الخاصية 1072114 للعنصر‎ :fornnovali date e 


:frtarget ®‏ وتسمح بتجاوز الخاصية 4۲88٤‏ للعنصر 0۲۳1]. 


وتعمل الخصائص السابقة مع العنصر <11 1>للنوعين 101388 ,)1١10ء‏ فقط, وتساعد هذه الخصائص على إنشاء أكثر 


من زر إرسال لمعلومات النموذج. 
<form action="demo_form.asp" method="get" id="user_form">‏ 
E-mail: <input type="email" name="userid" /> <br />‏ 
<input type="submit" value="Submit" />‏ 
<br />‏ 
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />‏ 
<br />‏ 
<input type="submit" formnovalidate="true"‏ 
value="Submit without validation" />‏ 
<br />‏ 


</form> 
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الخاصية width‏ 
تستخدم الخاصية لتحديد عرض الصورة التي تستخدم عند استخدام النوع 170388 للعنصر <111> فقط: 


<input type="image" src="img_submit.gif' width="24" height="24" /> 


الخاصية height‏ 
تستخدم الخاصية لتحديد ارتفاع الصورة التي تستخدم عند استخدام النوع 100388 للعنصر <1 11> فقط: 


<input type="image" src="img_submit.gif' width="24" height="24" /> 


الخاصية ء11 
الخاصية 11 تحدد العنصر ء1اةةل لحقل الإدحال, حيث تحدد اء1اة٤4‏ ججموعة من القيم كخيارات لحقل الإدحال, 
وتعمل هذه الخاصية مع أنواع العنصر >utصin<‏ وaa: text, search, url, tel, email, date pickers,‏ 


.number, range, color 
Webpage: <input type="url" list="url_list" name-="link" /> 
<datalist id="url_list"> 
<option label="SyrDev" value="http://www.syrdev.net" /> 
<option label="Google" value="http://www.google.com" /> 
<option label="Microsoft" value="http://www.microsoft.com" /> 


</datalist> 


الخاصية زص 
الخاصية 11211 تستخدم لفرض قيود على حقول الإدخال الرقمية 0110261 أو قيم التاريخ, وتحدد الخاصية 11211 القيمة 


الدنيا المسموح بإدخاها وتعمل هذه الخاصية مع أنواع العنصر >101< ıllillة: :date pickers, number, range‏ 


Points: <input type="number" name="points" min="0" max="10" step="3" /> 
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الخاصية ×123 تستخدم لفرض قيود على حقول الإدخال الرقمية 11126 أو قيم التاريخ, وتحدد الخاصية ×14 
القيمة العظمى المسموح بإدخالها وتعمل هذه الخاصية مع أنواع العنصر >Uض¬i< date pickers, number, :iılall‏ 


:range 


Points: <input type="number" name="points" min="0" max="10" step="3" /> 


الخاصية step‏ 
الخاصية 56 تستخدم لفرض قيود على حقول الإدحال الرقمية 11258۴ أو قيم التاريخ, وتحدد الخاصية 5)0 تحدد 
ا لخطوة بين القيم المسموح بإدخالما وتعمل هذه الخاصية مع أنواع العنصر >غUاض10<‏ ıllillة: date pickers, number,‏ 


:range 
Points: <input type="number" name="points" min="0" max="10" step="3" /> 


الخاصي multiple‏ 
kllۈاصية multiple‏ بأنه يمكن تحديد عدة قيم لعنصر الإدحال, وتعمل هذه الخاصية على الأنواع التالية للعنصر 


:email, fille :<input> 
Select images: <input type="file" name="img" multiple=-"multiple" /> 


الخاصي novalidate‏ 
الخاصية 1072112 تحدد بأن عنصر الإدحل لا يجب التحقق من صحة معلوماته عند إرسال معلومات النموذج, 
وتعمل هذه الخاصية مع العنصر >0۲1١<‏ ومع الأنواع التالية للعنصر text, search, url, tel, email, :<input>‏ 


:password, date pickers, range, color 
<form action="demo_form.asp" method="get" novalidate="true"> 
E-mail: <input type="email" name="user_email" /> 
<input type="submit" /> 


</form> 
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الخاصية pattern‏ 
تحدد الخاصية ۲۸ع4 النموذج (تعبير نظامى) الذي يجب أن يطبق على مُدحلات عنصر الإدحال للتحقق من 


صحتها, وتعمل هذه الخاصية على الأنوع تة للعنصر >Uص10<: :text, search, url, tel, email, password‏ 


Country code: <input type="text" name="country_code" pattern="[A-z]{3}" 


title="T'hree letter country code" /> 


placeholder يصاخll‎ 

الخاصية 014۴۲ 11ط هي عبارة عن قيمة نصية تظهر ني حقل الإدحال كمساعدة للقيمة المتوقع إدخاها, وتعمل هذه 
الخاصية على الأنواع التالية للعنصر ,text, search, url, tel, email, password :<i¬ p<‏ ویظھر هذا النص 
عندما يكون حقل الإدحال فارغ وتختفي عند كتابة قيمة في حقل الإدخال: 


<input type="search" name="user_ search" placeholder="jgيروسلنlا "المطورون‎ /< 


الخاصية required‏ 
الخاصية ۲۴٩11۲۴١‏ تحدد أن حقل الإدحل يجب تعبئته بقيمة قبل إرسال معلومات النموذج, وتعمل هذه الخاصية على 
الأنواع alll‏ للعنصر text, search, url, tel, email, password, date pickers, number, :<input>‏ 


:checkbox, radio, file 


Name: <input type="text" name="usr_name" required=-"required" /> 


الخصائص الجديدة للعناصر في 15ا7M‏ ]1 

e‏ e]اcontenteditab,‏ هذه القيمة تأحذ القيمة ع۲1 أو عله وعندما تكون قيمتها هى ع۲1) فهذا يعنى أن 
المستخدم يستطيع ترير محتوى القسم القابل للتحرير, وهذا يستخدم بشكل كبير في الحررات التي يتم بناؤها للعمل على 
الصفحات مثل حررات المنتديات. 

:cont exte N1‏ تقبل هذه الخاصية قيمة الخاصية 14 لعنصر <11611> ما يحدد قائمة السياق للعنصر. 

.44- كن للمبرمج تعريف الخصائص الخاصة به بشرط أن تبدا ب‎ ۳1M [5 ق‎ :data-yourvalue e 

مraggab]eاd:‏ هذه الخاصية يمكن أن تأخذ القيمة 10ا4 ,ءاه ,۲116] وهي تحدد هل يستطيع المستخدم سحب 
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den‏ لاط: تأحذ هذه الخاصية القيمة 11140٨١‏ وعندها يختفي العنصر الذي تطبق عليه هذه الخاصية وجميع محتويات 
هذا العنصر, لكن يبقى بالإمكان الوصول إلى العنصر من خلال امc۲1ء2v258[.‏ 

١‏ 1€: هذه الخاصية إما تكون قيمتها سلسلة نصية فارغة 5۲118 yا‏ ١0ع‏ أو آ٣ا‏ مثل ۷.18€ع۷۲d؟ك,‏ والهدف من 
هذه الخاصية هي جحميع جحموعة عناصر مع بعضها. 


:tem P0‏ هذه الخاصية تأحذ قيمة ضمن الحموعة التي عرفتها الخاصية 11817 مثال: 
<section item=”syrdev.net.article” >‏ 
>lı</h1لعzي‏ iتقدp‏ ... <h1 itemprop=””syrdev.net. title” > H1 M5‏ 
<1 ML</h[ګH‏ ستتعلم في هذه المقالة المحتصر اlئفيد <h1 itemprop=””syrdev.net.desc”> jz‏ 
</section>‏ 


ckعch]اعمء:‏ تأحذ هذه الخاصية إحدى القيمتين ه٤‏ ,۲118] وني حال القيمة £4158 هذا يعني أنه ني حال كتابة 
اللستخدم كلمة أو بعارة خحطاً في الحقل النصي عندها سيقترح المتصفح تصحيح هذا الخطاً وعند الضغط عليه بزر الفأرة 
الأيمن عندها ستظهر جحموعة من الاقتراحات لتصحيح الخطاً. 

eci‏ jطuك:‏ تأحذ هذه الخاصية قيمة الخاصية أ1 للعنصر المراد الارتباط معه, مثال: 


<div id=-"about"> 


<ط/>المطورون السوريون هو بداية ...<> 


</div> 


< م syrdev .net>/‏ موقع المطورون السوریون هو <p subject="about">‏ 
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